import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {useRef, useState} from 'react';
import { rewardLevel} from "@/services/chatter";
import {DatePicker, Image} from 'antd';
import OnlineTables from "@/pages/reports/OnlineTables";
import OnlineButton from "@/pages/reports/OnlineButton";
import MessageButton from "@/pages/reports/MessageButton";


export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type GithubIssueItem = {
    rowID: string;
    queryDate: string;
    queryTime: number;
    state: string;
    chatterAccount: string;
    chatterNickName: string;
    onlineTotal: number;
    onlineStageRage?: string;
};
var actionRef = null;
function onChange(date, dateString) {
    console.log(date, dateString);
}

const columns: ProColumns<GithubIssueItem>[] = [

    {
        title: 'chatterUserCode',
        dataIndex: 'chatterUserCode',
        hideInTable: true,
        hideInSearch: true,
    },
    {
        title: 'Start Date',
        dataIndex: 'startDate',
        valueType: 'date',
        ellipsis: true,
        hideInTable: true,
        // render: (_, record) => (
        //     <DatePicker/>
        // ),
    },
    {
        title: 'End Date',
        dataIndex: 'endDate',
        valueType: 'date',
        ellipsis: true,
        hideInTable: true,
    },


    {
        title: 'CID',
        dataIndex: 'chatterAccount',
        copyable: true,
        ellipsis: true,
    },
    {
        title: 'Chatter Name',
        dataIndex: 'chatterNickName',
        copyable: true,
        ellipsis: true,
    },
    {
        title: 'Reward Date',
        dataIndex: 'rewardDate',
        ellipsis: true,
        hideInSearch: true,
    },
    {
        title: 'Reward Level',
        dataIndex: 'rewardLevel',
        ellipsis: true,
        hideInSearch: true,
        valueEnum: {
            // 99: {text: 'ALL'},
            1: {
                text: 'A',
                status: 'A',
            },
            2: {
                text: 'S',
                status: 'S'
            }
        }
    },
    {
        title: 'Approval Date',
        dataIndex: 'approvalDate',
        ellipsis: true,
        hideInSearch: true,
    },
    // {
    //     title: 'Actions',
    //     valueType: 'option',
    //     key: 'option',
    //     render: (text, record, _, action) => [
    //         <OnlineButton chatterCode={record.chatterUserCode} reloadTable={() => {
    //             actionRef.current?.reload()
    //         }}/>,
    //         <MessageButton chatterCode={record.chatterUserCode} reloadTable={() => {
    //             actionRef.current?.reload()
    //         }}/>
    //     ],
    // },

];

export default () => {
    actionRef = useRef<ActionType>();
    const [totalCnt,setTotalCnt] = useState(10);
    const [onlineAvgRage,setOnlineAvgRage] = useState();
    const [workingTimeOnlineRage,setWorkingTimeOnlineRage] = useState();
    return (
        <div>

            <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params) => {
                    let response = await rewardLevel(params);
                    setTotalCnt(response.totalNum);
                    return {
                        data: response.rewardReportDtoList == null ? [] : response.rewardReportDtoList
                    };
                }}

                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                    onChange(value) {
                        console.log('value: ', value);
                    },
                }}
                rowKey="chatterUserCode"
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    pageSize: 30,
                    total:totalCnt,
                    onChange: (page) => console.log(page),
                }}



                dateFormatter="string"
                // headerTitle={"Replied On Time Avg Total: " + onlineAvgRage + "--Working Time Avg Total: " + workingTimeOnlineRage}

            />
        </div>
    );
};